﻿
@{
    ViewBag.Title = "Index";
}
<section class="Hui-article-box">
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i> 首页
        <span class="c-gray en">&gt;</span>系统管理
        <span class="c-gray en">&gt;</span> 角色管理
        <a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新">
            <i class="Hui-iconfont">&#xe68f;</i>
        </a>
    </nav>
    <div class="Hui-article">
        <div class="cl pd-20">
            <div class="text-c">
                <input type="text" class="input-text" style="width:250px" placeholder="输入角色名称" id="pname" name="">
                <button type="button" class="btn btn-success" id="btn_Search" name=""><i class="Hui-iconfont">&#xe665;</i> 搜角色</button>
            </div>
            <div class="cl pd-5 bg-1 bk-gray">
                <span class="l">
                    <a href="javascript:;" id="deleteBatch" class="btn btn-danger radius">
                        <i class="Hui-iconfont">&#xe6e2;</i> 批量删除
                    </a>
                    <a class="btn btn-primary radius" href="javascript:;" id="btn_Add">
                        <i class="Hui-iconfont">&#xe600;</i> 添加角色
                    </a>
                </span>
            </div>
            <table id="table" class="table table-border table-bordered table-hover table-bg">
                <thead>
                    <tr>
                        <th scope="col" colspan="6">角色列表</th>
                    </tr>
                    <tr class="text-c">
                        <th width="25"><input type="checkbox" value="" name=""></th>
                        <th width="40">角色姓名</th>
                        <th width="70">操作</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</section>
@section footScript{

    <script>
        $(function () {
            $("#role").parent().parent().prev().addClass("selected");
            $("#role").parent().parent().css("display", "block");
            $("#role").addClass("current");

            getData();
        })
        var table;
        function getData() {
            var params = {};
            table = $("#table").DataTable({
                lengthChange: true,//是否显示每页大小的下拉框
                info: true, //是否显示页数信息
                processing: true, //显示加载中提示....
                ordering: false,//是否排序
                searching: false,//是否显示默认的搜索
                paging: true,//是否显示分页
                serverSide: true,//开启服务器模式,通过ajax从服务器获取数据

                //使用对象数组，一定要配置columns，告诉 DataTables 每列对应的属性
                columns: [
                    { data: '' },
                    { data: 'Name' },
                    {
                        data: 'Id', render: function (data, type, full, callback) {
                            return (' <a title="编辑" href="javascript:;" data-id=' + data + ' class="ml-5 edit"  style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a> <a title="删除"  href="javascript:;"  data-id=' + data + ' class="ml-5 delete" style="text-decoration:none"> <i class="Hui-iconfont">&#xe6e2;</i></a>   ')
                        }
                    }
                ],
                createdRow: function (row, data, index) {
                    /* 设置表格中的内容居中 */
                    $('td', row).attr("class", "text-c");
                },
                //开启服务器模式
                serverSide: true,
                //使用ajax异步请求
                ajax: {
                    type: 'POST',
                    url: '@Url.Action("GetList", "Roles")',
                    data: function (d) {
                        params.start = d.start;//开始的序号
                        params.length = d.length;//要取的数据的条数
                        params.name = $("#pname").val();//输入的关键字
                        return params;//自定义需要传递的参数。
                    }
                },
                //自定义列
                columnDefs: [{
                    targets: 0,
                    render: function (data, type, row, meta) {
                        return '<input type="checkbox" value="' + row.Id + '" name="selectIDs">';
                    }
                }
                    // { "orderable": false, "targets": 4 },
                ]
            });
        }

        //搜索
        $("#btn_Search").click(function () {
            //使datatable重新请求
            table.ajax.reload();
        })

        //新增
        $("#btn_Add").click(function () {
            layer_show("添加角色", "@Url.Action("Add", "Roles")?id=0", 800, 500)
        })

        //修改
        $('.edit').livequery('click', function () {
            var id = $(this).attr("data-id");
            layer_show("修改角色", "@Url.Action("Edit", "Roles")?id=" + id, 800, 500)
                return false;
        });

        //删除
        $(".delete").livequery('click', function () {
            var id = $(this).attr("data-id");
            layer.confirm('确认删除该数据？', { icon: 3, title: '提示' }, function (index) {
                $.post("@Url.Action("Delete", "Roles")", { id: id }, function (data) {
                    if (data.State == 1) {
                        location.reload();
                    } else {
                        layer.msg(data.ErrorMessage, { icon:2 });
                    }
                })
            });
        });

        //批量删除
        $("#deleteBatch").click(function () {
                var ids = [];
                $(":checkbox[name='selectIDs']:checked").each(function (index, item) {
                    var id = $(item).val();
                    ids.push(id);
                })
                if (ids.length == 0) {
                    layer.msg("请选择要删除的项");
                    return;
                }
                layer.confirm("确认是否删除该数据", { icon: 3, title: "删除提示" }, function () {
                    $.post("@Url.Action("DeleteBatch", "Roles")", { ids: ids }, function (data) {
                        if (data.State == 1) {
                            layer.msg(data.ErrorMessag, {
                                icon: 1,
                                time: 2000 //2秒关闭（如果不配置，默认是3秒）
                            }, function () {
                                location.reload();
                            });
                        } else {
                            layer.msg(data.ErrorMessage, { icon: 6 });
                        }
                    }, "json")
                })
            })
    </script>
}

